<!--
 * @Descripttion:
 * @Author: Silence
 * @Date: 2023-05-24 08:27:19
 * @LastEditors: Silence
 * @LastEditTime: 2023-05-24 09:26:57
-->
<template>
  <div class="subject">
    <div v-for="(item, index) in arr" :key="item.id">
      <span>{{ item.left }}</span>
      <span>+</span>
      <span>{{ item.right }}</span>
      <span>=</span>
      <input type="number" v-model="arr[index].down" />
      <button @click="submit(item.id)">提交</button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      arr: [
        { left: Math.ceil(Math.random() * 9), right: Math.ceil(Math.random() * 9), id: 1, down: '' },
        { left: Math.ceil(Math.random() * 9), right: Math.ceil(Math.random() * 9), id: 2, down: '' },
        { left: Math.ceil(Math.random() * 9), right: Math.ceil(Math.random() * 9), id: 3, down: '' },
        { left: Math.ceil(Math.random() * 9), right: Math.ceil(Math.random() * 9), id: 4, down: '' },
        { left: Math.ceil(Math.random() * 9), right: Math.ceil(Math.random() * 9), id: 5, down: '' }
      ],
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    submit (id) {
      let statu = false
      this.arr.forEach(item => {
        if (item.id === id) {
          console.log(item.down);
          statu = item.left + item.right === +item.down
        }
      })
      this.$Bus.$emit('msg', { statu, id })
    }
  }
}
</script>
<style lang='less'  scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>
